<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .tooltip{
            position :relative;
            border-bottom:1px dashed black;
        }
        .tooltip:before{
            content:attr(tooltip-data);
            position: absolute;
            width:250px;
            background-color: #efba93;
            color:#fff;
            text-align: center;
            line-height:1.1;
            padding:15px;
            border-radius: 5px;
            bottom:125%;
            left:50%;
            /* margin-bottom: -60px; */
            transform: translateX(-50%);
            font-size:0.7em;
            visibility: hidden;
            transform: opacity .5s;
            opacity: 0;
        }
        .tooltip:after{
            content:'';
            position: absolute;
            bottom:75%;
            margin-left:-5px;
            border-width:5px;
            border-style: solid;
            opacity:0;
            visibility: hidden;
            transition: opacity .5s;
            border-color:#000 transparent transparent transparent;
        }
        .tooltip:hover:before,.tooltip:hover:after{
            opacity:1;
            visibility: visible;
        }
    </style>
</head>
<body>
    <h1> HTML/CSS tooltip</h1>
    <p>Hover <span class="tooltip"  tooltip-data="Tooltip Content">Here</span>
    to see the tooltip</p>
    <p> you can also Hover
        <span class="tooltip"  tooltip-data="This is another Tooltip Content">
here
        </span>to see another example
    </p>
</body>
</html>